<template>
  <div><div class="abstatic-height"></div>
    <div class="vedio-container">
        <el-container>
            <el-main style="padding-top: 0;">
                <div class="xf-tableft-title"><i class="el-icon-caret-right"></i>实时视频</div>
                <div class="vmain">
                    <div id="div1" ref="div1" style="transform:scale(1);">
                        <el-row>
                            <el-col :span="pfNum" v-for="(item,index) in deviceShowbox" :key="index">
                                <div class="clearfix vmain-wrap" style="transform:scale(1);">
                                            <div class="percontain" ref="percontain" style="transform:scale(1);">
                                                <video class="videoplay" :id="forId(index)"  controls controlsList="nofullscreen nodownload noremote footbar" autoplay>
                                                    <source :src="item.liveAddress.rtmpHd">
                                                </video>
                                            </div>
                                            <div class="botConbox">
                                                <p class="videotitle">{{item.deviceName}}</p>
                                                <div v-show="item.solutionName" class="video-solut">
                                                    <span>分析方案:</span>
                                                    <span>{{item.solutionName}}</span>
                                                </div>
                                                <div class="botconBox">
                                                    <div class="botText" v-for="(item1,index1) in item.alarmMsg" :key="index1" :title='item1.title+""+item1.value'>
                                                        <span >{{item1.title}}:</span>
                                                        <span v-bind="{class:'alerm'+item1.status}">{{item1.value}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <el-row>
                            <div class="video-pagewrap">
                                <div class="pic">
                                    <span @click="pageToone(1)">
                                        <icon-svg  icon-class="one"/>
                                    </span>
                                    <span @click="pageTofour(4)">
                                            <icon-svg  icon-class="four"/>
                                    </span>
                                    <span @click="pageTonine(9)">
                                        <icon-svg  icon-class="nine"/>
                                    </span>
                                    <span @click="pageTosixt(16)">
                                        <icon-svg  icon-class="sixteen"/>
                                    </span>
                                </div>

                                <div class="pagination-container" >
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="page"
                                        :page-sizes="[1,4,9,16]"
                                        :page-size="limit"
                                        layout="prev, pager, next, jumper ,total"
                                        :total="total">
                                    </el-pagination>
                                </div>
                        </div>
                </el-row>
            </el-main>
            <el-aside width="286px" class="video-aside">
              <div class="xf-tableft-title"><i class="el-icon-caret-right"></i>监控列表</div>
                <div class="searchBox">
                    <el-input
                        placeholder="请输入内容"
                        v-model="sbName"
                        >
                    </el-input>
                    <i class="el-icon-search" @click="search" style="color: #50E3C2"></i>
                </div>
                <div class="topBoxCon">
                    <div class="topBox" v-for="(item,index) in devData" :key="index">
                        <div class="topLine clearfix">
                            <b class="el-icon-caret-bottom"  v-show="item.isFolded"></b>
                            <b class="el-icon-caret-top" v-show="!item.isFolded"></b>
                            <div class="devName" :title="item.deviceGroupName" @click="toggle(index)">{{item.deviceGroupName}}</div>
                            <div class="allplay" @click="checkAll1(index)">全部播放</div>
                        </div>
                        <div class="listCon" v-show="item.isFolded">
                            <div class="listRecord" v-for="(item1,index1) in item.deviceVideoExts" :key="index1">
                                <i class="tName"></i>
                                <span :title="item1.deviceVideoName">{{item1.deviceVideoName}}</span>
                                <el-checkbox  ref="checkBox" class="checkBoxO" v-model="item1.isShow" @change="chooseInfo(item1.id,index,item1.isShow)"></el-checkbox>
                            </div>
                        </div>

                        <el-dialog title="关闭所有窗口" :visible.sync="isCloseAll" :show-close='false' custom-class="xf-jc-dialog" width="360px" height="160px">
                            <div class="xf-jc-deletect">
                                <p>确定关闭所有视频窗口吗？</p>
                            </div>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="danger" size="mini" @click="confirmDel">确定</el-button>
                                <el-button size="mini" type="text" @click="isCloseAll=false">取消</el-button>
                            </div>
                        </el-dialog>
                    </div>

                </div>
                <div class="botBox" @click="closeAll(item)">
                    <i class="el-icon-error"></i>
                    <span>关闭所有窗口</span>
                </div>
            </el-aside>
        </el-container>
    </div>
  </div>
</template>
<script>
import {
    getDevtree,
    tablelist,
    updateShowStatus
} from "@/api/device/videoWatch/index";
export default {
    data(){
        return {
            timeFlag:null,
           playerAbout:{
            token:"at.c43ftspcc9nuz8l6dohvgo3q7yke2ivj-1sctqy4xmy-06fca6k-zvwahwne9",
            url:'ezopen://open.ys7.com/C32084508/1.rec'
           },
            isCloseAll:false,
            rowNum:1,
            deviceShowbox:[],
            deviceVideoExts:[],
            getCheckedBox:[],
            page:1,
            limit:1,
            total:null,
            devData:[],
            curChannelId:'',
            isShow1:true,
            isShow:true,
            checked:false,
            list1:{
                tName:'祖堂',
                tContent:[
                    {name:'摄像头1',checked:false},
                     {name:'摄像头2',checked:false}
                ]
            },
            list2:{
                tName:'祖堂',
                tContent:[
                    {name:'摄像头1',checked:false},
                     {name:'摄像头2',checked:false}]
            },
            sbName:'',
            pfNum:12,
            // tocol:1,
            vedio:{
                name1:'',
                time:'',
                sbType:'',
                gjName:'告警状态',
                statusName:'烟雾告警',

            }
        }
    },
    created(){

    },
    mounted(){
        this.fetchData();
    },
    watch:{
      '$route':'fetchData'
    },
    methods: {
        confirmDel(index){
            let canshu =this.$qs.stringify({
                isShow:false
            })
            updateShowStatus(canshu).then(res => {
                if(res.status === 200){
                    this.initLoad();
                    this.isCloseAll = false;
                }
            }).catch(res => {
                this.$notify({
                    title: "提示",
                    message: "网络异常！",
                    type: "warning",
                    duration: 2000
                });
            });
        },
        closeAll(){
            this.isCloseAll = true;
        },
        search(){
             getDevtree({deviceNoOrName:this.sbName}).then( res => {
                 this.devData = [];
                if(res.status === 200){
                    this.devData = res.data;
                }else{

                }
            }).catch(function (error){
                console.log(error);
            })
        },
        pageToone(val){
             this.deviceShowbox=[];
            this.pfNum = 24;
            this.handleSizeChange(val);
        },
        pageTofour(val){
            this.deviceShowbox=[];
            this.pfNum = 12;
            this.handleSizeChange(val);
            if(this.deviceShowbox.length === 0 ){
               this.handleCurrentChange(1);
            }
        },
        pageTonine(val){
            this.deviceShowbox=[];
            this.pfNum = 8;
            this.handleSizeChange(val);
            if(this.deviceShowbox.length === 0 ){
               this.handleCurrentChange(1);
            }
        },
        pageTosixt(val){
            this.deviceShowbox=[];
            this.pfNum = 6;
            this.handleSizeChange(val);
            if(this.deviceShowbox.length === 0 ){
               this.handleCurrentChange(1);
            }
        },

        forId(index){
            this.$nextTick(function(){
                setTimeout(()=>{
                    this.getVideo(index)
                },1000)

            })
            return "myPlayer_"+index;
        },
        getVideo(index){
            let player = new EZUIPlayer('myPlayer_'+index);
        },
        getChecked(data){
            let arr =[];
            data.forEach((item,index) => {
                if(item.isShow){
                    arr.push(data[index].id);
                }
            })
            return arr;
        },
        // 全选
        checkAll1(index){
            this.devData[index].deviceVideoExts.forEach((item,index)=>{
                 item.isShow = true;
            })
            this.getCheckedBox = this.getChecked(this.devData[index].deviceVideoExts).join(',')
            let canshu =this.$qs.stringify({
                ids:this.getCheckedBox,
                isShow:true
            })
            updateShowStatus(canshu).then(res => {
                if(res.status === 200){
                    this.getList();
                }
            }).catch(res => {
                this.$notify({
                    title: "提示",
                    message: "网络异常！",
                    type: "warning",
                    duration: 2000
                });
            });
        },
        chooseInfo(id,index,status){
            if(status == true){
                let canshu =this.$qs.stringify({
                    ids:id,
                    isShow:status
                 })
                updateShowStatus(canshu).then(res => {
                    this.deviceShowbox=[];
                    if(res.status === 200){

                        this.getList();
                    }
                })
            }else{
                let canshu =this.$qs.stringify({
                    ids:id,
                    isShow:status
                })
                 updateShowStatus(canshu).then(res => {
                      this.deviceShowbox=[];
                    if(res.status === 200){
                        this.getList();
                    }else{
                        this.$notify({
                            title: "提示",
                            message: res.message,
                            type: "warning",
                            duration: 2000
                        });
                    }
                })
            }
        },
        handleSizeChange(val){
            this.deviceShowbox=[];
            this.limit = val;
            this.getList()
        },
        handleCurrentChange(val){
            this.deviceShowbox=[];
            this.page = val;
            this.getList()
        },
        getList(){
            //
          tablelist({limit:this.limit,page:this.page,isShow:true}).then(res => {
                this.deviceShowbox=[];
                this.deviceShowbox = res.data.rows;
                this.total = res.data.total;
            }).catch(res=>{
                this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
                });
            })
        },
        fetchData(){
            //  路由变化重载数据
            this.curChannelId = this.$route.params.id;
            this.initLoad();
        },
        initLoad(){
            getDevtree().then( res => {
                if(res.status === 200){
                    this.devData = res.data;
                }
                this.getList();
            }).catch(function (error){

            })
        },
        toggle(index){
             this.devData[index].isFolded=!this.devData[index].isFolded;
        },
    }
}
</script>
<style lang="scss">
    .vedio-container{
      color: rgba(255,255,255,.7);
      .vmain{
        min-height: calc(100vh - 160px);

      }
      .video-aside{
        position: relative;
        font-size: 14px;
        padding: 10px;
        margin-right: 5px;
        height: 90vh;
        background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
        &:before{
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border:2px solid #50E3C2;
          clip-path: polygon(0 0,30px 0,30px 100%,0 100%);
        }
        .topBoxCon{
          margin-top: 10px;
          margin-bottom: 50px;
        }
        .botBox{
          width: 254px;
          position: absolute;
          background: rgba(0,0,0,0.3);
          bottom: 20px;
          left: 17px;
          line-height: 40px;
          text-align: center;
          height: 40px;
          cursor: pointer;
          color: #50E3C2;
        }
      }
        .vmain-wrap{
          .videoplay{
            width: 100%;
            min-width:233px;
            min-height:180px;
          }
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
        }
       .botConbox{
         padding-left:20px;
         padding-top: 10px;
         min-height: 90px;
         font-size: 14px;
         .videotitle{
           font-size: 16px;
           color: #fff;
           margin: 0;
         }
         .video-solut{
           line-height: 2;
         }
                .botconBox{
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .botText .alerm1{
                    color: #FF3B30 !important;
                }
                .botText .alerm0{

                    color: #FFAF40 !important;
                }
                .botText .alerm2{

                    color: #1ABC9C !important;;
                }
            }
        .searchBox{
            position: relative;
            width: 100%;
            .el-icon-search{
                position: absolute;
                right: 10px;
                top: 10px;
            }
        }
        .topBox{
            width: 100%;
          padding-bottom: 10px;
            .topLine{
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                .allplay{
                    display: inline;
                    cursor: pointer;
                }
                .devName{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 10;
                    display: inline-block;
                  cursor: pointer;
                }
            }
            .listCon{
                width: 100%;
                padding:0 20px;
                .listRecord{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    height: 30px;
                    .tName{
                        width: 6px;
                        height: 6px;
                        display: inline-block;
                        margin-right: 5px;
                        background-color: #08FF68;
                        border-radius:100%;
                        display: none;
                    }
                    span{
                        flex: 10;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
        .video-pagewrap{
            margin-top: 10px;
          border-top: 1px solid rgba(80, 227, 194, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .pic{
                span{
                  cursor: pointer;
                  svg{
                    width: 26px;
                    height: 24px;
                  }
                }
            }
            .el-icon-rank{
                transform: rotate(135deg);
                font-size: 30px;
            }
            .pagination-container{
                display: inline-block;
                float: right;
            }
        }

    }


</style>

